import { ModalForm, ProFormDigit, ProFormGroup, ProFormList, ProFormText } from '@ant-design/pro-components';
import { Form, Modal, Carousel } from 'antd';
import $http from '@/services/http.service.v2';
import { useState } from 'react';

export default function RoleScreenshotDialog({children, selectDate}) {
  const [form] = Form.useForm();
  const contentStyle = {
    margin: 0,
    height: '160px',
    color: '#fff',
    lineHeight: '160px',
    textAlign: 'center',
    background: '#364d79',
  };
  const [imgs, setImgs] = useState([])
  function onOpenChange(open) {
    if (open) {
      $http.getRoleScreenshot(selectDate).subscribe(res => {
        setImgs(res.data.map(e => {
          return {
            name: e.split(".").shift(),
            url: `https://wonew-wss.frp.wonew.top/screenshot/${selectDate}/${e}`
          }
        }))
      })
    }
  }
  console.error(imgs)
  return (
    <ModalForm
      title="新建表单"
      trigger={children}
      form={form}
      modalProps={{
        destroyOnClose: true,
      }}
      submitTimeout={2000}
      width={1000}
      onOpenChange={onOpenChange}
      onFinish={values => {
        // onFinish(values)
        return true
      }}
    >
        <Carousel draggable arrows infinite={false}>
          {imgs.map((e, idx) => {
            return <div key={idx} className='w-full before:block before:content-[""] before:w-full pb-[56.25%] relative'>
              <img src={e.url} className='absolute w-full top-0 left-0 h-full' alt="" />
              <p className='absolute top-0 left-0 bg-black text-white'>{e.name}</p>
            </div>
          })}
        </Carousel>
    </ModalForm>
  )
}